Changing development ports (Advanced)

There are two ports involved, the port of the dockerized WordPress instance, and the port the Browser Sync runs on. To change the port of the dockerized WordPress instance go into docker-compose.yml and modify ports.

# docker-compose.yml
  ...
ports:
  - "9009:80" # only need to change `9009:80` --> localhost:9009
  ...

If you want to change the port you develop on (the default is 4000), then open scripts/webpack.config.js and modify BrowserSyncPlugin's port option. If you changed the WordPress port above, be sure to also change proxy accordingly. Don't forget the trailing slash.

// scripts/webpack.config.js
//...
new BrowserSyncPlugin({
    notify: false,
    host: 'localhost',
    port: 4000, // this is the port you develop on. Can be anything.
    logLevel: 'silent',
    files: ['./*.php'],
    proxy: 'http://127.0.0.1:9009/', // This port must match docker-compose.yml
})
//...